<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-row>
          <div class="logo"></div>
        </el-row>
        <el-row>
          <el-col :span="12" style="width:100%">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">
              <el-submenu index="1" style="width: 200px;">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>导航一</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="1-1">选项1</el-menu-item>
                  <el-menu-item index="1-2">选项2</el-menu-item>
                </el-menu-item-group>
              </el-submenu>



            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container>
        <el-header>
          <!--头部开始-->
          <el-row>
            <el-col :span="8"><div class="grid-content row-header"></div></el-col>
            <el-col :span="8"><div class="grid-content row-header">
              <h1 style="color:#fff;font-size: 24px;">电商后台管理系统</h1>
            </div></el-col>
            <el-col :span="8"><div class="grid-content row-header" style="padding-top: 20px;">
              <span class="row-header-user" style="margin-right: 5px;">您好:admin</span><span class="row-header-user" style="color:blue;">退出</span>
            </div></el-col>
          </el-row>
          <!--头部结束-->
        </el-header>
        <el-main style="background: #fff">
          <!--中间部分头部面包屑导航-->
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <el-breadcrumb separator="/">
                  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                  <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
                  <el-breadcrumb-item>用户列表</el-breadcrumb-item>
                </el-breadcrumb>
              </div>
            </el-col>
          </el-row>
          <!--中间部分头部面包屑导航结束-->
          <!--搜索-->
          <el-row style="margin-top: 8px;">
            <el-col :span="6">
              <div class="" style="background: #fff;width: 100%">
                <el-input style="width: 100%" v-model="input" placeholder="请输入内容"></el-input>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="" style="background: #fff;text-align: left">
                <el-button @click="getSearchUser" style="border-top-left-radius: 0px;border-bottom-left-radius: 0px;" icon="el-icon-search" type="info" plain></el-button>
                <el-button type="success" @click="dialogFormVisible = true" plain>添加用户</el-button>
              </div>
            </el-col>
          </el-row>
          <!--搜索结束-->
          <!--信息列表-->
          <template>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              v-if="tbshow"
            >
              <el-table-column
                prop="date"
                type="index"
                label="#"
                width="180">
              </el-table-column>
              <el-table-column
                prop="username"
                label="姓名"
                width="180">
              </el-table-column>
              <el-table-column
                prop="email"
                label="邮箱">
              </el-table-column>
              <el-table-column
                prop="mobile"
                label="电话"
                width="180">
              </el-table-column>
              <el-table-column
                label="状态"
                width="180">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.mg_state"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="changeState(scope)"
                  >
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column
                prop="address"
                label="操作">
                <template slot-scope="scope">
                  <el-button @click="editUser(scope)" class="btn_edit" type="primary" icon="el-icon-edit"></el-button>
                  <el-button class="btn_edit" type="primary" icon="el-icon-share"></el-button>
                  <el-button  class="btn_edit" type="primary" icon="el-icon-delete"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <!--信息列表结束-->
          <!--分页-->
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark" style="width: 100%;height:20px;text-align: left;padding-top: 5px;">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[3, 4, 5, 6]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
              </div>
            </el-col>
          </el-row>
          <!--分页结束-->
          <!--添加用户弹出框-->
          <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
            <el-form :rules="rules" :model="form">
              <el-form-item prop="username" label="用户姓名" :label-width="formLabelWidth">
                <el-input v-model="form.username" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="password" label="用户密码" :label-width="formLabelWidth">
                <el-input v-model="form.password" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="email" label="用户邮箱" :label-width="formLabelWidth">
                <el-input v-model="form.email" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="mobile" label="用户电话" :label-width="formLabelWidth">
                <el-input v-model="form.mobile" auto-complete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="addUsers">确 定</el-button>
            </div>
          </el-dialog>
          <!--添加用户弹出框结束-->
          <!--编辑用户-->
          <el-dialog title="编辑用户" :visible.sync="dialogFormVisible2">
            <el-form :rules="rules" :model="form">
              <el-form-item prop="username" label="用户姓名" :label-width="formLabelWidth">
                <el-input v-model="form.username" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="email" label="用户邮箱" :label-width="formLabelWidth">
                <el-input v-model="form.email" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="mobile" label="用户电话" :label-width="formLabelWidth">
                <el-input v-model="form.mobile" auto-complete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible2 = false">取 消</el-button>
              <el-button type="primary" @click="editUserToApi">确 定</el-button>
            </div>
          </el-dialog>
          <!--编辑用户结束-->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  import '../api/index.js'
  import axios from 'axios'
  import { getUserList } from '../api/connectApi.js'
    export default {
        data () {
            return {
              tbshow:true,
              rules: {
                username: [
                  { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                  { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                email: [
                  { required: true, message: '请输入邮箱', trigger: 'blur' }
                ],
                mobile: [
                  { required: true, message: '请输入电话', trigger: 'blur' }
                ]
              },
              form: {
                  id:'',
                username: '',
                password:'',
                email:'',
                mobile:''
              },
              dialogFormVisible: false,
              dialogFormVisible2:false,
              formLabelWidth: '120px',
                total:0,
                input:'',
              curretPage:1,
              pagesize:3,
              currentPage1: 5,
              currentPage2: 5,
              currentPage3: 5,
              currentPage4: 4,
              value1: true,
              value2: true,
              tableData: [{
                date: '2016-05-02',
                name: '司马光',
                address: '上海市普陀区金沙江路 1518 弄'
              }]
            }
        },
      methods: {
            editUser(item){
              this.dialogFormVisible2 = true;
              let {id,username,email,mobile} = item.row
              this.form = {
                id,username,email,mobile
              }
            },
            editUserToApi(){
              axios.put('http://localhost:8888/api/private/v1/users/'+this.form.id,{
                      email:this.form.email,
                      mobile:this.form.mobile
              }).then((res)=>{
                if(res.data.meta.status === 200){
                  this.$message({type:'success',message:res.data.meta.msg})
                  this.tbshow = false;
                  this.$nextTick(() => (this.tbshow = true))
                  this.dialogFormVisible2 = false;
                }else{
                  this.$message({type:'error',message:res.data.meta.msg})
                }
              })
            },
            addUsers(){
              console.log(this.form);
              axios.post('http://localhost:8888/api/private/v1/users',this.form).then((res)=>{
                console.log(res);
                if(res.data.meta.status === 201){
                  this.$message({type:'success',message:res.data.meta.msg})
                    this.dialogFormVisible = false;
                  }else{
                      this.$message({type:'error',message:res.data.meta.msg})
                  }
              })
//                this.dialogFormVisible = false;
            },
            changeState(item){
                axios.put('http://localhost:8888/api/private/v1/users/'+item.row.id+'/state/'+item.row.mg_state).then((res)=>{
                    if(res.data.meta.status==200){
                        this.$message({
                            type:'success',
                            message:res.data.meta.msg
                        })
                    }else{
                      this.$message({
                        type:'error',
                        message:res.data.meta.msg
                      })
                    }
                }).catch((err)=>{
                    console.log(err)
                })
            },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleOpen(){},
        handleClose(){
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.pagesize = val;
          let params = {
            params: {
              query: '',
              pagenum:this.curretPage,
              pagesize: this.pagesize,
            }
          }
          getUserList(params)
            .then((response)=>{
              console.log('----------------')
              this.total = response.data.data.total;
              this.tableData = response.data.data.users;
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.curretPage = val;
          let params = {
            params: {
              query: '',
              pagenum:this.curretPage,
              pagesize: this.pagesize,
            }
          }
          getUserList(params)
            .then((response)=>{
              console.log('----------------')
              console.log(response);
              this.total = response.data.data.total;
              this.tableData = response.data.data.users;
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        getSearchUser(){
          let params = {
            params: {
              query: this.input,
              pagenum: 1,
              pagesize: 5,
            }
          }
          getUserList(params).then(res=>{
            this.tableData = res.data.data.users;
          })
        }
      },
      //页面初始的时候
      mounted(){
        console.log(this.$store.state.aaaa);
        let params = {
          params: {
            query: '',
            pagenum: this.curretPage,
            pagesize: this.pagesize,
          }
        }
        getUserList(params)
          .then((response)=>{
            console.log(response)
            this.total = response.data.data.total;
            this.tableData = response.data.data.users;
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    }
</script>
<style>
  .row-header{
    height: 30px;
  }
  .row-header-user{
    font-size:14px;
    color:#fff;
    margin-top: 5px;
  }
  .btn_edit{
    background: #E3E3E3;
    padding: 10px;
  }
  .logo{
    height:60px;
    background: url(../assets/logo.png);
    background-size: cover;
    background-color: #989898;
  }
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    /*line-height: 60px;*/
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
    height:100vh;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    /*line-height: 160px;*/
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  .el-row {
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 0px;
  }
  .bg-purple-dark {
    /*background: #99a9bf;*/
    background: #D3DCE6;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 0px;
    /*min-height: 36px;*/
    padding-top:15px;
    padding-bottom:15px;
    padding-left:10px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
